<template>
    <div id = "history-model" :style = "myWidth">
      <canvas id = "historyCanvas" v-el:history_canvas
       height = "637" width = "475">
      </canvas>
      <div id = "scal-0">{{0}}</div>
      <div id = "scal-1">{{maxRange / 4}}</div>
      <div id = "scal-2">{{maxRange / 4 * 2}}</div>
      <div id = "scal-3">{{maxRange / 4 * 3}}</div>

      <div class = "history-record">
      <div> No.1 </div>
      <div> {{historyTime}} </div>
      <div class = "history-fore">
        FORE:
        <span class = "fore-value"> {{foreValue}}m</span>
      </div>
      </div>
    </div>
</template>

<script>
  import * as EchoKey from '../utils/echo-key'
  import EchoMenu from '../utils/echo-menu'
  import EchoTool from '../utils/echo-tool'
  let _Interval = EchoMenu.getMenuItems('menu/Display')

  let _timeout      // 定时器标识符
  let historyLog = {
    _time: 0,       // 历史记录最新事件
    _data: []       // 数组第一个是最新数据
  }

  function draw () {
    let ctx = this.$els.history_canvas.getContext('2d')
    EchoTool.clearEcho(ctx, this.frameWidth, 637)
    EchoTool.drawScale(ctx, this.frameWidth, '#FFFFFF')
    EchoTool.drawTimeAxis(ctx, this.timePos)
    EchoTool.getHistoryData(this.echoData, this.maxRange,
      this.interval[1].value, historyLog)
    EchoTool.drawHistoryLine(ctx, this.frameWidth,
      this.maxRange, historyLog)
  }

  function repaintTimeAxis () {
    let ctx = this.$els.history_canvas.getContext('2d')
    EchoTool.clearEcho(ctx, this.frameWidth, 637)
    EchoTool.drawScale(ctx, this.frameWidth, '#FFFFFF')
    EchoTool.drawTimeAxis(ctx, this.timePos)
    EchoTool.drawHistoryLine(ctx, this.frameWidth,
      this.maxRange, historyLog)
  }

  function startDrawHistory () {
    let _this = this
    _timeout = setInterval(function () {
      draw.call(_this)
    }, 5000)
  }

  function checkTime (i) {
    if (i < 10) {
      i = '0' + i
    }
    return i
  }

  //  获取时间轴上对应数据
  function getTimeAxisData () {
    //  history-model 把横坐标分成720份
    //  每份间隔 x 像素
    let _this = this
    let x = _this.frameWidth / 720
    //  获取时间 间距
    let _interval = this.interval[1].value
    if (_interval.indexOf('5s') !== -1) {
      _interval = 5
    } else if (_interval.indexOf('1 min') !== -1) {
      _interval = 60
    } else if (_interval.indexOf('2 min') !== -1) {
      _interval = 120
    }

    {
      let im = (_this.frameWidth - _this.timePos) / x * _interval * 1000
      im = historyLog._time.getTime() - im
      let tmp = new Date(im)    //  时间轴位置对应时间
      let h = tmp.getHours()
      let m = tmp.getMinutes()
      let s = tmp.getSeconds()
      h = checkTime(h)
      m = checkTime(m)
      s = checkTime(s)
      _this.historyTime = h + ':' + m + '\'' + s
    }
    {
      let arr = historyLog._data
      let pos = _this.timePos / x
      pos = 720 - pos
      pos = Math.round(pos)
//      console.log('pos =' + pos + ';length =' + arr.length)
      if (pos > arr.length) {
        _this.foreValue = 0
      } else {
        _this.foreValue = arr[pos]
      }
    }
  }

  export default {
    data () {
      return {
        interval: _Interval,        // 历史记录的区间
        timePos: 0,                 //  时间轴 x 坐标距离 (单位:px)
        foreValue: 0,               //  时间轴对应数值
        historyTime: '00:00\'00',   //  时间轴对应时间
        frameWidth: 475,
        echoData: EchoTool.EchoData
      }
    },
    computed: {
      myWidth: function () {
        return 'width:' + '' + '475' + 'px'
      }
    },
    ready () {
      draw.call(this)
      startDrawHistory.call(this)
    },
    props: {
      maxRange: {
        type: Number,
        default: 10
      }
    },
    watch: {
      frameWidth: function () {
        draw.call(this)
      },
      maxRange: function () {
        draw.call(this)
      },
      'interval[1].value': function () {
        let _this = this
        let _interval = this.interval[1].value
        if (_interval === '5s') {
          _interval = 5000
        } else if (_interval === '1 min') {
          _interval = 600000
        } else if (_interval === '2 min') {
          _interval = 120000
        }
        if (_timeout) {
          clearInterval(_timeout)
          _timeout = setInterval(draw.call(_this), _interval)
        }
      }
    },
    events: {
      [EchoKey.RIGHT_ENT] (evt) {
        let _this = this
        let x = _this.frameWidth / 720
        _this.timePos += x
        if (_this.timePos > _this.frameWidth) {
          _this.timePos = _this.frameWidth
        }
        repaintTimeAxis.call(_this)
        getTimeAxisData.call(this)
      },
      [EchoKey.LEFT] (evt) {
        let _this = this
        let x = _this.frameWidth / 720
        _this.timePos -= x
        if (_this.timePos < 0) {
          _this.timePos = 0
        }
        repaintTimeAxis.call(_this)
        getTimeAxisData.call(this)
      },
      [EchoKey.RIGHT_ENT + 'holdon'] (evt) {
        //  时间轴50倍快速右移
        let _this = this
        let x = _this.frameWidth / 720
        x *= 50
        _this.timePos += x
        if (_this.timePos > _this.frameWidth) {
          _this.timePos = _this.frameWidth
        }
        repaintTimeAxis.call(_this)
        getTimeAxisData.call(this)
      },
      [EchoKey.LEFT + 'holdon'] (evt) {
        //  时间轴50倍快速左移
        let _this = this
        let x = _this.frameWidth / 720
        x *= 50
        _this.timePos -= x
        if (_this.timePos < 0) {
          _this.timePos = 0
        }
        repaintTimeAxis.call(_this)
        getTimeAxisData.call(this)
      }
    }
  }
</script>

<style lang = "less">
  #history-model {
    height: 635px;
    width: 475px;
    text-align: right;
  }

  .history-record {
    position: relative;
    top: -300px;
    left: 50px;
    font-size: 35px;
    text-align: left;
  }

  .history-fore {
    color: #3E98BF;
  }

  .fore-value {
    color: white;
  }

</style>
